<template name="login">
	<view>
		<view class="bg-white  relative" :style="'height:' + height+'px;'">
			<cu-custom bgColor="bg-red" :isBack="true">			<block slot="backText"></block>
				<block slot="content">登录</block>
			</cu-custom>

			<view class="margin">

				<block v-if="isWeixinBrowser">

					<block v-if="loginType=='wechatMobile'">
						<view class="text-center">
							<view>
								<view class="cu-tag line-green">授权成功，请绑定手机号！</view>
							</view>
							<view class="cu-avatar xl round default-bg margin-top-sm">
								<image :src="wechatMember.head_portrait" mode="aspectFill"></image>
							</view>

							<view class="cu-form-group  bg-none margin-top text-left">
								<input placeholder="输入手机号" name="mobile" v-model="loginMobileFormData.mobile"></input>
							</view>
							<view class="cu-form-group text-left">
								<input placeholder="输入验证码" name="code" v-model="loginMobileFormData.code"></input>
								<view class="action">
									<smsView ref="smsView" :mobile="loginMobileFormData.mobile"></smsView>
								</view>
							</view>
							<view class="cu-form-group padding-top-xl">
								<view class="margin-top-xl w100 lg cu-btn  block text-white round shadow-blur" :class="['bg-'+theme,'bg-gradual-'+theme]"
								 @click="login_mobile">
									<block v-if="loginLoading">
										<view class="cuIcon-loading2 cuIconfont-spin"></view>绑定中
									</block>
									<block v-else>绑定</block>
								</view>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="text-center margin-top-xl padding-top-xl">
							<view class="cu-avatar xl  margin-top-xl ">
								<image :src="config?config.logo:''" mode="aspectFill"></image>
							</view>
							<!-- <view class=" text-lg">{{APP_NAME}}</view> -->
						</view>
						<view class="margin margin-top-xl padding-top-xl">
							<view class="cu-btn lg bg-green radius margin-top-xl" @click="login_wechat">微信登录</view>
						</view>
					</block>

				</block>
				<block v-else>
					<block v-if="loginType=='mobile'">
						<view class="text-center ">
							<view class="cu-avatar xl round ">
								<image :src="config?config.logo:''" mode="aspectFill"></image>
							</view>
							<!-- <view class=" text-lg">{{APP_NAME}}</view> -->
						</view>
						<view class="text-center">
							<view class="cu-form-group  bg-none margin-top text-left">
								<input placeholder="输入手机号" name="mobile" v-model="loginMobileFormData.mobile"></input>
							</view>
							<view class="cu-form-group text-left">
								<input placeholder="输入验证码" name="code" v-model="loginMobileFormData.code"></input>
								<view class="action">
									<smsView ref="smsView" :mobile="loginMobileFormData.mobile"></smsView>
								</view>
							</view>
							<view class="cu-form-group padding-top-xl">
								<view class="margin-top-xl w100 lg cu-btn  block text-white round shadow-blur" :class="['bg-'+theme,'bg-gradual-'+theme]"
								 @click="login_mobile">
									<block v-if="loginLoading">
										<view class="cuIcon-loading2 cuIconfont-spin"></view>绑定中
									</block>
									<block v-else>绑定</block>
								</view>
							</view>
						</view>
					</block>
					<block v-else-if="loginType=='wechatMobile'">
						<view class="text-center">
							<view>
								<view class="cu-tag light line-green">授权成功，请绑定手机号！</view>
							</view>
							<view class="cu-avatar xl round default-bg margin-top-sm">
								<image :src="wechatMember.head_portrait" mode="aspectFill"></image>
							</view>

							<view class="cu-form-group  bg-none margin-top text-left">
								<input placeholder="输入手机号" name="mobile" v-model="loginMobileFormData.mobile"></input>
							</view>
							<view class="cu-form-group text-left">
								<input placeholder="输入验证码" name="code" v-model="loginMobileFormData.code"></input>
								<view class="action">
									<smsView ref="smsView" :mobile="loginMobileFormData.mobile"></smsView>
								</view>
							</view>
							<view class="cu-form-group padding-top-xl">
								<view class="margin-top-xl w100 lg cu-btn  block text-white round shadow-blur" :class="['bg-'+theme,'bg-gradual-'+theme]"
								 @click="login_mobile">
									<block v-if="loginLoading">
										<view class="cuIcon-loading2 cuIconfont-spin"></view>绑定中
									</block>
									<block v-else>绑定</block>
								</view>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="text-center margin-top-xl padding-top-xl">
							<view class="cu-avatar xl round margin-top-xl">
								<image :src="config?config.logo:''" Lmode="aspectFill"></image>
							</view>
							<!-- <view class=" text-lg">{{APP_NAME}}</view> -->
						</view>
						<view class="margin margin-top-xl padding-top-xl">
							<view class="cu-btn lg bg-green radius margin-top-xl" @click="handleThirdLoginApp">微信登录</view>
						</view>
						<view class="cu-form-group  bg-none margin-top">
							<input placeholder="手机号/账号" name="username" v-model="formData.username"></input>
						</view>
						<view class="cu-form-group">
							<input placeholder="密码" name="password" type="password" v-model="formData.password"></input>
						</view>
						<view class="cu-form-group padding-top-xl">
							<view class="margin-top-xl w100 lg cu-btn  block text-white round shadow-blur" :class="['bg-'+theme,'bg-gradual-'+theme]"
							 @click="login_default">
								<block v-if="loginLoading">
									<view class="cuIcon-loading2 cuIconfont-spin"></view>登陆中
								</block>
								<block v-else>登陆</block>
							</view>
						</view>
					</block>

				</block>
			</view>

			<!-- #ifdef MP-WEIXIN -->
			<view class="text-center margin-top-xl">
				<view class="cu-avatar xl round margin-top-xl default_avatar">
					<image :src="infoRes.userInfo.avatarUrl" mode="aspectFill" v-if="infoRes"></image>
				</view>
				<view class="margin text-lg">{{infoRes?infoRes.userInfo.nickName:''}}</view>
			</view>
			<view class="padding-top margin-top-xl margin-lr">
				<view class="margin">
					<button open-type="getUserInfo" class="margin-top-xl w100 lg cu-btn block text-white round shadow-blur ctr" :class="['bg-'+theme,'bg-gradual-'+theme]"
					 @click="login_mini">授权登录</button>
				</view>
			</view>
			<!-- #endif -->

			<!-- #ifdef H5 -->
			<!-- <block v-if="isWeixinBrowser">
						<view class="text-center margin-top-xl">
							<view class="cu-avatar xl round margin-top-xl">
								<image src="https://attract-1251028293.cos.ap-guangzhou.myqcloud.com/images/2020/05/27/image_159056931854495149.png"
								 mode="aspectFill"></image>
					
							</view>
							<view class="margin text-lg">{{APP_NAME}}</view>
						</view>
						<view class="padding-top margin-top-xl margin-lr">
							<view class="margin">
								<view class="margin-top-xl w100 lg cu-btn block text-white round shadow-blur ctr" :class="['bg-'+theme,'bg-gradual-'+theme]"
								 @click="login_wechat">授权登录</view>
							</view>
						</view>
					</block>
					<block v-else>
					</block> -->
			<!-- #endif -->

			<view class="text-center absolute bottom   w100">
				<block v-if="1">
				</block>
				<block v-else>
					<view class="margin-top-xl padding-top-xl text-center text-gray bgline">其他登录方式</view>
					<view class="margin flex justify-center">


						<!-- #ifdef MP-WEIXIN -->
						<button class="text-center margin-lr-sm" open-type='getUserInfo' @getuserinfo="appLoginWx" v-if="loginType!='wechatMP'">
							<view class="iconfont icon-weixin-copy login-icon text-green"></view>
							<view class="text-sm">小程序登录</view>
						</button>
						<button class="text-center margin-lr-sm" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
							<view class="iconfont icon-shouji login-icon text-orange"></view>
							<view class="text-sm">手机验证</view>
						</button>
						<!-- #endif -->

						<!-- #ifdef H5 -->
						<block v-if="isWeixinBrowser">
							<view class="text-center margin-lr-sm" @click="login_wechat" v-if="loginType!='wechat'">
								<view class="iconfont icon-weixin-copy login-icon text-green"></view>
								<view class="text-sm">微信登录</view>
							</view>
						</block>
						<view class="text-center margin-lr-sm" @click="loginType='mobile'" v-if="loginType!='mobile'">
							<view class="iconfont icon-shouji login-icon text-orange"></view>
							<view class="text-sm">手机验证</view>
						</view>
						<view class="text-center margin-lr-sm" @click="loginType='default'" v-if="loginType!='default'">
							<view class="iconfont icon-qunfengxiugaimima login-icon text-orange light"></view>
							<view class="text-sm">账号登录</view>
						</view>
						<!-- #endif -->
						<!-- #ifdef APP-VUE -->
						<view class="text-center margin-lr-sm" @click="handleThirdLoginApp" v-if="loginType!='wechat'">
							<view class="iconfont icon-weixin-copy login-icon text-green"></view>
							<view class="text-sm">微信登录</view>
						</view>
						<view class="text-center margin-lr-sm" @click="loginType='mobile'" v-if="loginType!='mobile'">
							<view class="iconfont icon-shouji login-icon text-orange"></view>
							<view class="text-sm">手机验证</view>
						</view>
						<!-- #endif -->
					</view>
				</block>

				<view class="margin margin-top-xl">登录即视为已阅读并同意<text :class="'text-'+theme" @tap="goPage('/pages/site/single_detail?id=2')">《注册协议》</text>和<text
					 :class="'text-'+theme" @tap="goPage('/pages/site/single_detail?id=3')">《隐私协议》</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	import smsView from '@/components/default/smsView.vue'
	export default {
		name: "login",
		components: {
			smsView,
		},
		data() {
			return {
				formData: {
					username: "",
					password: "",
					group: "h5"
				},
				text: "",
				run_system: "h5",
				SessionKey: '',
				OpenId: '',
				infoRes: null,
				code: '',
				state: 0,
				modalName: 'loginModal',
				loginLoading: false,
				theme: this.$config.THEME(),
				loginType: 'mobile', //是否注册状态 default mobile
				wechatMember: {
					id: 0,
					head_portrait: '',
					nickname: '',
					oauth_client_user_id: '',
					oauth_client: '',
					gender: 0,
				},
				loginMobileFormData: {
					mobile: '',
					code: '',
					group: "h5"
				},
				height: this.windowHeight,
				config: null
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin']),
		methods: {
			...mapMutations(['login', 'info']),
			getPhoneNumber(e) {
				let _this = this
				if (!this.code) {
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							_this.code = loginRes.code
							_this.$common.showError('授权失败，请重新授权')
						},
					})
				} else this.login_wechat_mobile(e.detail.iv, e.detail.encryptedData)
			},
			login_wechat_mobile(iv, encryptedData) {
				let backurl = this.$common.getCache('backurl')
				console.log(this.infoRes)
				this.$http
					.post('mini_mobile_login', {
						code: this.code,
						iv: iv,
						encryptedData: encryptedData,
					})
					.then((response) => {
						console.log(response)
						if (response.data.data.access_token) {
							this.login([response.data.data.access_token])
							this.loginSuccess(backurl)
							return
						}
					})
					.catch((response) => {})
			},
			login_mobile() {
				if (this.loginLoading) return
				this.loginLoading = true
				uni.showLoading({
					title: "登陆中..."
				})
				let form = this.loginMobileFormData
				form.id = this.wechatMember.id
				form.nickname = this.wechatMember.nickname
				form.gender = this.wechatMember.gender
				form.head_portrait = this.wechatMember.head_portrait
				form.share_id = this.$common.getCache('share_id')

				let backurl = this.$common.getCache('backurl')
				this.$http
					.post('mobile_login', this.loginMobileFormData)
					.then((response) => {
						console.log(response)
						let token = response.data.data.access_token
						let member = response.data.data.member
						this.login([token])
						// this.info(member)
						uni.hideLoading()
						this.loginLoading = false

						this.loginSuccess(backurl)
					})
					.catch((response) => {
						this.loginLoading = false
					})
			},
			login_default() {
				console.log(123)
				if (this.loginLoading) return
				this.loginLoading = true
				uni.showLoading({
					title: "登陆中..."
				})
				let backurl = this.$common.getCache('backurl')
				this.$http
					.post('login', this.formData)
					.then((response) => {
						console.log(response)
						let token = response.data.data.access_token
						let member = response.data.data.member
						this.login([token])
						// this.info(member)
						uni.hideLoading()
						this.loginLoading = false
						this.loginSuccess(backurl)
					})
					.catch((response) => {
						this.loginLoading = false
					})
			},
			login_mini_sent() {
				uni.showLoading({
					title: '登录中...'
				})
				let backurl = this.$common.getCache('backurl')
				this.$http
					.post('mini_login', {
						code: this.code,
						iv: this.infoRes.iv,
						rawData: this.infoRes.rawData,
						encryptedData: this.infoRes.encryptedData,
						signature: this.infoRes.signature,
					})
					.then((response) => {
						console.log(response)
						uni.hideLoading()
						if (response.data.data.access_token) {
							this.login([response.data.data.access_token])
							this.loginSuccess(backurl)
							return
						}
						this.loginType = 'loginMobile'
						this.wechatMember.id = response.data.data.id
						this.wechatMember.nickname = response.data.data.nickname
						this.wechatMember.gender = response.data.data.gender
						this.wechatMember.head_portrait = response.data.data.head_portrait
					})
					.catch((response) => {
						console.log(response)
						uni.hideLoading()
					})
			},
			appLoginWx: function(res) {
				let _self = this
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: (res) => {
									_self.code = res.code
									uni.getUserInfo({
										provider: 'weixin',
										success: (info) => { //这里请求接口
											console.log(res);
											console.log(info);
											_self.infoRes = info
											_self.login_mini_sent()
										},
										fail: () => {
											uni.showToast({
												title: "微信登录授权失败",
												icon: "none"
											});
										}
									})

								},
								fail: () => {
									uni.showToast({
										title: "微信登录授权失败",
										icon: "none"
									});
								}
							})

						} else {
							uni.showToast({
								title: '请先安装微信或升级版本',
								icon: "none"
							});
						}
					}
				});

			},
			login_mini() {
				let _this = this
				uni.showLoading({
					title: '登录中...'
				})
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						_this.infoRes = infoRes
						_this.login_mini_sent()
					},
					fail(e) {
						console.log(e)
					}
				})
				// uni.login({
				// 	provider: 'weixin',
				// 	success: function(loginRes) {
				// 		_this.code = loginRes.code

				// 	},
				// 	fail(error) {
				// 		console.log(error)
				// 	}
				// })
			},
			login_wechat() {
				var share_id = this.$common.getCache('share_id')
				var reback_url = this.$http.host() + '/api/v1/site/wechat-login?url=' + encodeURIComponent(location.href) +
					'&share_id=' + share_id
				window.location.href = reback_url
			},
			closeLogin() {
				this.modalName = ''
				setTimeout((res) => {
					this.navigateBack()
				}, 500)
			},
			loginSuccess(backurl) {
				this.$common.showSuccess('登录成功', (r) => {
					if (backurl && backurl.indexOf("login") < 0) {
						this.$common.rmCache('backurl')
						uni.redirectTo({
							url: backurl
						})
					} else {
						uni.redirectTo({
							url: '/pages/member/index'
						})
					}
				})
			},
			//app第三方登录
			handleThirdLoginApp() {
				console.log("App微信拉起授权")
				var that = this
				uni.showLoading({
					title: '授权中...'
				})
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						console.log(res.provider);
						//支持微信、qq和微博等
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									console.log("App微信获取用户信息成功", loginRes);
									that.getApploginData(loginRes) //请求登录接口方法
								},
								fail: function(res) {
									uni.hideLoading()
									that.$common.showError('授权失败')
									console.log("App微信获取用户信息失败", res);
								}
							})
						}
					}
				});
			},
			getApploginData(data) {
				console.log(data)

				let backurl = this.$common.getCache('backurl')
				var that = this
				// that.$common.showSuccess('授权成功')
				//这边是前端自己去调微信用户信息的接口，根据接口需要请求，如果不需要前端去获取的话就交给后端，可省去次操作
				uni.request({
					url: "https://api.weixin.qq.com/sns/userinfo?access_token=" + data.authResult.access_token + "&openid=" + data.authResult
						.openid,
					method: 'GET',
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					},
					success(res) {
						console.log('【登录回调啾啾啾】', res)
						that.$http
							.post('app_wechat_login', res.data)
							.then((response) => {
								console.log(response)
								uni.hideLoading()
								that.loginLoading = false
								if (response.data.data.access_token) {
									let token = response.data.data.access_token
									let member = response.data.data.member
									that.login([token])
									that.info(member)

									that.loginSuccess(backurl)
								} else {
									//微信登录没绑定过手机号
									that.loginType = 'wechatMobile'
									that.wechatMember.id = response.data.data.id
									that.wechatMember.nickname = response.data.data.nickname
									that.wechatMember.gender = response.data.data.gender
									that.wechatMember.head_portrait = response.data.data.head_portrait
								}
							})
							.catch((response) => {
								console.log(response)
								that.loginLoading = false
							})

					},
					fail() {}
				})
			}
		},
		onLoad(options) {
			let _this = this
			let backurl = this.$common.getCache('backurl')

			if (options.token) {
				this.login([options.token])
				if (backurl && backurl.indexOf("login") < 0) {
					this.$common.rmCache('backurl')
					uni.redirectTo({
						url: backurl
					})
				} else {
					uni.redirectTo({
						url: '/pages/member/index'
					})
				}
				return
			} else if (options.id) {
				//微信登录没绑定过手机号
				this.loginType = 'wechatMobile'
				this.wechatMember.id = options.id
				this.wechatMember.nickname = options.nickname
				this.wechatMember.gender = options.gender
				this.wechatMember.head_portrait = options.head_portrait
			}
			setTimeout((res) => {
				this.modalName = 'loginModal'
			}, 500)

			// #ifdef MP-WEIXIN
			this.run_system = 'mini'
			uni.getUserInfo({
				provider: 'weixin',
				success: function(infoRes) {
					_this.infoRes = infoRes
					console.log(infoRes)
				}
			})
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					_this.code = loginRes.code
				},
			})
			// #endif

			// #ifdef H5
			this.run_system = 'h5'
			// #endif
		},
		onShow() {
			console.log('是否登录：' + this.hasLogin)
			this.$common.getConfig().then((config) => {
				this.config = config
			})
		}
	}
</script>

<style>
	.bg {
		height: 100vh;
		position: relative;
		overflow: auto;
	}

	.action-content {
		width: 100%;
		position: absolute;
		bottom: 40rpx;
	}

	.logo-thumb {
		width: 180rpx;
		height: 180rpx;
		border-radius: 20rpx;
		margin: 180rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 46rpx;
	}

	.action-view {
		margin: 30px 0;
		border-radius: 10px;
		padding: 30px;
	}

	.wechat-view {
		text-align: center;
	}

	.action-view .title {
		font-size: 18px;
		line-height: 30px;
		margin-bottom: 20px;
	}

	.action-view .tips {
		line-height: 20px;
	}

	.action-view .ctr {
		margin-top: 20px;
	}

	.btn-login {
		font-size: 18px;
		padding: 24px 40px;
		margin: 0 auto;
	}

	.cu-btn {
		width: 100%;
	}

	.logo {
		text-align: center;
		font-size: 40px;
		padding-top: 80px;
		font-family: '微软雅黑';
	}

	.bottom {
		bottom: 0;
	}

	.login-icon {
		font-size: 70rpx;
	}

	button {
		line-height: unset;
		padding: 0;
		background: none;
		border: none;
		position: unset;
	}

	button::after {
		content: none;
	}
</style>
